<template>
  <button
    class="v-button"
    :class="{ disabled: disabled }"
    :style="style"
    :open-type="openType"
    @click="clickHandle"
    @contact="contactHandle"
    @getphonenumber="getphonenumberHandle"
    @chooseavatar="chooseavatar"
    @error="errorHandle"
    @opensetting="opensettingHandle"
    @launchapp="launchappHandle"
    @bindgetuserinfo="bindgetuserinfo"
  >
    <view
      v-if="$slots.icon"
      class="v-button-icon"
    >
      <slot name="icon" />
    </view>
    <view class="v-button-text">
      <slot />
    </view>
  </button>
</template>

<script setup lang="ts">
import type { CSSProperties } from 'vue';

const props = withDefaults(
  defineProps<{
    disabled?: boolean;
    customStyle?: CSSProperties;
    type?: 'primary' | 'success' | 'danger' | 'plain' | 'text';
    openType?: string;
  }>(),
  {
    disabled: false,
    customStyle: undefined,
    type: undefined,
    openType: undefined
  }
);

const emits = defineEmits<{
  click: [];
  disabled: [];
  contact: [];
  getphonenumber: [value: ButtonEvent.GetPhoneNumber];
  error: [];
  opensetting: [];
  launchapp: [];
  bindgetuserinfo: [];
  chooseavatar: [value: ButtonAvatarEvent.GetAvatar];
}>();

const clickHandle = () => {
  if (disabled.value) {
    emits('disabled');
  } else {
    emits('click');
  }
};
const contactHandle = () => emits('contact');
const getphonenumberHandle = (event: ButtonEvent.GetPhoneNumber) =>
  emits('getphonenumber', event);
const chooseavatar = (event: ButtonAvatarEvent.GetAvatar) =>
  emits('chooseavatar', event);
const errorHandle = () => emits('error');
const opensettingHandle = () => emits('opensetting');
const launchappHandle = () => emits('launchapp');
const bindgetuserinfo = () => emits('bindgetuserinfo');

const type = toRef(props, 'type');
const disabled = toRef(props, 'disabled');
const customStyle = toRef(props, 'customStyle');

const style = computed(() => {
  const styleObj: CSSProperties = {
    margin: '0',
    height: '76rpx',
    fontSize: '28rpx',
    fontWeight: 'bold',
    lineHeight: '1.5',
    borderRadius: '100vh',
    whiteSpace: 'nowrap',
    userSelect: 'none',
    overflow: 'hidden',
    textOverflow: 'ellipsis'
  };
  switch (true) {
    case disabled.value:
      styleObj['--v-color'] = 'white';
      styleObj['--v-border'] = '1px solid rgb(204, 204, 204)';
      styleObj['--v-background'] = 'rgb(204, 204, 204)';
      break;
    case type.value === 'primary':
      styleObj['--v-color'] = 'white';
      styleObj['--v-border'] = '1px solid rgb(255, 47, 59)';
      styleObj['--v-background'] = 'rgb(255, 47, 59)';
      styleObj['--v-active-border'] = '1px solid rgb(216, 38, 48)';
      styleObj['--v-active-background'] = 'rgb(216, 38, 48)';
      break;
    case type.value === 'success':
      styleObj['--v-color'] = 'white';
      styleObj['--v-border'] = '1px solid rgb(40, 196, 69)';
      styleObj['--v-background'] = 'rgb(40, 196, 69)';
      styleObj['--v-active-border'] = '1px solid rgb(45, 201, 74)';
      styleObj['--v-active-background'] = 'rgb(45, 201, 74)';
      break;
    case type.value === 'danger':
      styleObj['--v-color'] = 'white';
      styleObj['--v-border'] = '1px solid rgb(240, 102, 113)';
      styleObj['--v-background'] = 'rgb(240, 102, 113)';
      styleObj['--v-active-border'] = '1px solid rgb(255, 132, 143)';
      styleObj['--v-active-background'] = 'rgb(255, 132, 143)';
      break;
    case type.value === 'plain':
      styleObj['--v-color'] = 'rgb(51, 51, 51)';
      styleObj['--v-border'] = '1px solid rgb(204, 204, 204)';
      styleObj['--v-background'] = 'rgb(255, 255, 255)';
      styleObj['--v-active-border'] = '1px solid rgb(204, 204, 204)';
      styleObj['--v-active-background'] = 'rgb(246, 252, 255)';
      break;
    case type.value === 'text':
      styleObj['--v-color'] = 'rgb(51, 51, 51)';
      styleObj['--v-border'] = '1px solid transparent';
      styleObj['--v-background'] = 'rgb(255, 255, 255)';
      styleObj['--v-active-border'] = '1px solid transparent';
      styleObj['--v-active-background'] = 'rgb(246, 252, 255)';
      break;
    default:
      styleObj['--v-color'] = 'rgb(85, 85, 85)';
      styleObj['--v-border'] = '1px solid rgb(229, 230, 235)';
      styleObj['--v-background'] = 'rgb(255, 255, 255)';
      styleObj['--v-active-border'] = '1px solid rgb(229, 230, 235)';
      styleObj['--v-active-background'] = 'rgb(246, 252, 255)';
      break;
  }

  if (customStyle.value) {
    Object.assign(styleObj, customStyle.value);
  }
  return styleObj;
});
</script>

<style lang="scss" scoped>
.v-button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--v-color);
  border: var(--v-border);
  background-color: var(--v-background);
  transition:
    color 0.1s,
    border 0.1s,
    background-color 0.1s;
  user-select: none;
  &:active {
    color: var(--v-active-color, var(--v-color));
    border: var(--v-active-border, val(--v-border));
    background-color: var(--v-active-background, var(--v-background));
  }
  &::after {
    display: none;
  }
  .v-button-icon {
    margin-right: 20rpx;
  }
  .v-button-text {
    overflow: inherit;
    text-overflow: inherit;
    white-space: inherit;
  }
}
</style>
